<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../views/libs/element-ui@2.12.0.css" />
  <title></title>
  <style>
    *, html, body {
      margin: 0;
      padding: 0;
      background-color: black;
    }
    #root {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      padding: 5px 3px 5px 10px;
      box-sizing: border-box;
    }
    #root .console {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      color: #bbb;
      font-size: 14px;
    }
    #root .btn {
      position: fixed;
      top: 10px;
      right: 10px;
      background-color: transparent;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: center;
    }
    ::-webkit-scrollbar {  /*滚动条整体样式*/
      width: 5px;  /*宽分别对应竖滚动条的尺寸*/
      height: 5px;  /*高分别对应横滚动条的尺寸*/
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
      border-radius: 5px;
      background-color: #666;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
  </style>
</head>
<body>
  <div id="root">
    <div class="console" id="console" v-html="consoleData"></div>
    <div class="btn">
      <el-button type="text" icon="el-icon-video-play" @click="start" :disabled="startBtnDisabled">启动</el-button>
      <el-button type="text" icon="el-icon-switch-button" @click="stop" :disabled="stopBtnDisabled">停止</el-button>
      <el-button type="text" icon="el-icon-refresh-right" @click="restart" :disabled="restartBtnDisabled">重启</el-button>
    </div>
  </div>
<script src="../views/libs/vue@2.6.10.js"></script>
<script src="../views/libs/element-ui@2.12.0.js"></script>
<script>
  const childProcess = require('child_process');
  const path = require('path');
  const { ipcRenderer } = require('electron');
  new Vue({
    el: document.getElementById("root"),
    data() {
      return {
        startBtnDisabled: true,
        stopBtnDisabled: false,
        restartBtnDisabled: false,
        consoleData: '',
        server: null,
        serverPath: '',
        projectName: ''
      }
    },
    created() {
      ipcRenderer.on('projectName', (event, args) => {
        document.getElementsByTagName('title')[0].innerText = `项目 ${args} 控制台`;
        this.projectName = args;
        this.serverPath = path.resolve("/data-mock/projects", `${this.projectName}`, "server.js");;
        this.start();
      });
    },
    watch: {
      consoleData() {
        document.getElementById("console").scrollTop = document.getElementById("console").offsetHeight;
      }
    },
    methods: {
      start() {
        this.consoleData = "";
        this.server = childProcess.spawn('node', [this.serverPath]);
        this.server.stdout.on('data', data => {
          this.consoleData += data;
        });
        this.server.stderr.on('data', err => {
          this.consoleData += `<p style="color:red;">${err}</p>`;
        });
        this.server.on('close', (code, signal) => {
          this.consoleData += `<br> The process has been closed. Close code ${code}, signal ${signal}.<br>`
        });
        this.server.on('exit', (code, signal) => {
          this.consoleData += `<br> The process has been exited. Exit code ${code}, signal ${signal}.<br>`
        });
        this.server.on('error', error => {
          this.consoleData += `<p style="color:red;">${error}</p>`;
        });
        this.startBtnDisabled = true;
        this.stopBtnDisabled = false;
        this.restartBtnDisabled = false;
      },
      stop() {
        this.server.kill();
        this.startBtnDisabled = false;
        this.stopBtnDisabled = true;
        this.restartBtnDisabled = true;
      },
      restart() {
        this.stop();
        this.start();
      }
    },
    beforeDestroy() {
      this.server.stop();
    }
  })
</script>
</body>
</html>
